<template>
	<coachCustomize url="/pages/coach/sign_in/sign_in" @setHeight="setHeight" ref="coach">
		
	<view class="content">
		<view class="date-module">
			<view class="item">
				<picker @change="bindPickerChange" :value="index1" :range="array">
					<view class="uni-input">
						<image class="icon" src="../../../static/teacher/date.png" mode="widthFix" />
						<view>{{ array[index1] }}</view>
						<image class="unfold" src="../../../static/teacher/unfold.png" mode="widthFix" />
					</view>
				</picker>
			</view>

			<view class="item">
				<picker @change="bindTimeChange" :value="index2" :range="times">
					<view class="uni-input">
						<image class="icon" src="../../../static/teacher/time.png" mode="widthFix" />
						<view>{{ times[index2] ? times[index2]: '时间'}}</view>
						<image class="unfold" src="../../../static/teacher/unfold.png" mode="widthFix" />
					</view>
				</picker>
			</view>
		</view>
		<scroll-view class="scroll" @scrolltolower="scrolltolower" :style="{ height: scrollHeight + 'px' }" scroll-y>
			<view class="data-list">
				<view class="item" v-for="(item,index) in studentList" :key="item.id">
					<view class="select" @click="onChecked(index)">
						<image v-if="item.checked" src="../../../static/teacher/yes_select.png" mode="widthFix" />
						<image v-else src="../../../static/teacher/no_select.png" mode="widthFix" />
					</view>
					<image class="avatar" src="https://img0.baidu.com/it/u=3324287611,3832720410&fm=26&fmt=auto&gp=0.jpg" mode="widthFix" />
					<view class="info">
						<view class="name">
							{{item.student_name}}
							<!-- <image v-if="item%4==0" src="../../../static/teacher/month.png" mode="widthFix"/>
							<image v-else-if="item%3==0"  src="../../../static/teacher/year.png" mode="widthFix"/>
							<image src="../../../static/teacher/season.png" mode="widthFix"/> -->
							 /{{item.card_name}}/{{item.course_name}}{{item.remark}}
						</view>
						<view class="course">总课时：-<text></text> 剩余课时：{{item.residual_class_hour}}</view>
					</view>
					<view v-if="item.hasSign=='active'" class="btn active">已签</view>
					<view v-else class="btn" @click="signIn(this, item.id, item.scdId, item.hasSign)" :data-id="item.id" :data-scdId="item.scdId" :data-state="item.hasSign">签到</view>
				</view>
				<hint ref="hint"></hint>
			</view>
		</scroll-view>
		<view class="global-btn">
			<view class="item" @click="onCheckedAll">
				<image v-if="checkAll" src="../../../static/teacher/yes_select.png" mode="widthFix" />
				<image v-else src="../../../static/teacher/no_select.png" mode="widthFix" />
				全选
			</view>
			<view class="item" @click="signInAll()">批量签到</view>
		</view>
	</view>
	</coachCustomize>
</template>

<script>
import coachCustomize from '@/components/coach-customize/coach-customize.vue';
export default {
	components: {
		coachCustomize
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			scrollHeight: 0,
			time: '12:01',
			date: currentDate,
			array: [],
			week:'',
			index1: 0,
			index2: 0,
			times:[],
			studentList:{},
			signSize:0,
			count:0,
			keyword:'',
			checkAll: false,
		};
	},
	computed: {
	    startDate() {
	        return this.getDate('start');
	    },
	    endDate() {
	        return this.getDate('end');
	    }
	},
	onReady() {
		//this.$refs.hint.setStatus('loading');
	},
	onLoad: function (option) {
		this.getWeek();
		this.getStudentList();
	},
	
	methods: {
		
		//选中学员
		onChecked(index){
			//console.log("------");
			this.studentList[index].checked = !this.studentList[index].checked;
			this.studentList = JSON.parse(JSON.stringify(this.studentList));
		},
		
		onCheckedAll(){
			this.checkAll = !this.checkAll	
			for(var i=0;i<this.studentList.length;i++){
				this.studentList[i].checked =  this.checkAll;
			}
		},
		
		//获取周
		getWeek: function(){
			uni.request({
				url: this.websiteUrl + 'app/teacher/getWeek', 
				data: {},
				success: (res) => {
					const weekList = res.data.weekList;
					for(var i=0;i<weekList.length;i++){
						this.array.push(weekList[i]);
					}
					if(this.array.length>0){
						this.week = this.array[0].split(" ")[1];
						this.getCourseDate(this.week);
					}
				}
			}); 
		},
		
		//选择周
		bindPickerChange: function(e) {
			this.index1 = e.target.value;
			this.week = this.array[e.target.value].split(" ")[1];
			this.getCourseDate(this.week);
		},
		
		//获取上课时间
		getCourseDate:function(week){
			console.log(this.week);
			const teacher = uni.getStorageSync('teacher');
			uni.request({
				url: this.websiteUrl + 'app/getStartTimeList', 
				data: {
					shopId: teacher.shopId,
					week: week
				},
				success: (res) => {
					if(res.data.code!=0){
						uni.showToast({
							title: res.data.msg,
							duration: 2000
						});
					}else{
						const list = res.data.startTimeList;
						var arrList = new Array();   
						for(var i=0;i<list.length;i++){
							var obj = list[i];
							arrList.push(obj.startTime);
						}
						this.times = arrList;
						this.time = this.times[0];
					}
					this.getStudentList();
				}
			}); 
		},
		
		//获取签到列表
		getStudentList: function(){
			console.log(this.array[this.index1]);
			const teacher = uni.getStorageSync('teacher');
			uni.request({
				url: this.websiteUrl + '/app/studentList', 
				data: {
					keyword:this.keyword,
					week:this.week,
					time:this.time,
					source:this.source,
					shopId:teacher.shopId,
					weekStr:this.array[this.index1]
				},
				success: (res) => {
					this.studentList = res.data.studentList;
					//统计签到人数
					this.count = this.studentList.length;
					var count = 0;
					for(var i=0;i<this.studentList.length;i++){
						const student = this.studentList[i];
						if(student.hasSign=='active'){
							count++;
						}
					}
					this.signSize = count;
				}
			}); 
		},
		
		signInAll: function(){
			debugger;
			if(this.studentList.length==0){
				uni.showToast({
					title: '请先选择要签到的学员！',
					duration: 3000
				});
				return;
			}
			let count = 0;
			for(var i=0;i<this.studentList.length;i++){
				let student = this.studentList[i];
				if(student.checked && student.hasSign!='active'){
					this.signIn(null, student.id, student.scdId, student.hasSign);
					count++;
				}
			}
			
			uni.showToast({
				title: '成功签到'+count+'名学员！',
				duration: 3000
			});
		},
		
		//签到
		signIn: function(obj,studentId, scdId, state){
			if(obj){
				obj.target.disabled = true;
			}
			//获取老师ID
			const teacher = uni.getStorageSync('teacher');
			//const studentId = obj.target.dataset.id;
			//const scdId = obj.target.dataset.scdId;
			//const state = obj.target.dataset.state;
			if(state=='active'){
				return;
			}
			console.log(studentId)
			
			
			uni.request({
				url: this.websiteUrl + '/app/signIn', 
				data: {
					studentId: studentId,
					teacherId: teacher.id,
					teacherName: teacher.teachername,
					//surplus: '',
					scdId:scdId
				},
				success: (res) => {
					if(res.data.code!=0){
						uni.showToast({
							title: res.data.msg,
							duration: 2000
						});
					}else{
						this.getStudentList();
					}
				}
			}); 
		},
		
		/**
		 * 获取可用容器高度
		 * @param {Object} data
		 */
		setHeight(data){
			this.$sys.getBoundingClientRect('.date-module').then(e => {
				this.scrollHeight = data- e.height;
				
			});
			
		},
		/**
		 * 滚动加载数据
		 */
		scrolltolower(){
			console.log("可以加载数据");
		},
		
		//选择课程时间
		bindTimeChange: function(e) {
		    this.index2 = e.target.value;
			this.time = this.times[e.target.value];
			console.log("time="+this.time);
			this.getStudentList();
		},
		
		
		
		/**
		 * 日期选择器
		 * @param {Object} e
		 */
		bindDateChange(e) {
			this.date = e.target.value;
		},

		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
	}
};
</script>

<style lang="scss">
.date-module {
	height: 130rpx;
	@extend .flex-space-between-center;
	border-bottom: 20rpx solid #f8f9f9;

	padding: 0px $base-interval;
	margin: 0px -1 * $base-interval;

	.item {
		//width: 48%;
		line-height: 68rpx;
		border-radius: 34rpx;
		border: 1rpx solid #cdced2;
		.uni-input {
			height: 100%;
			@extend .flex-space-between-center;
			padding: 0 $base-interval;
			color: $text-color-three;
			font-weight: 500;
			.icon {
				width: 32rpx;
			}
			.unfold {
				width: 20rpx;
			}
		}
	}
	
	.item:first-child {
		width: 61%;
	}
	.item:last-child {
		width: 33%;
	}
}
.scroll {
	.data-list {
		padding-bottom: 100rpx;
		.item {
			@extend .flex-space-between-center;
			justify-content: flex-start;
			border-bottom: 1rpx solid #e8e8e8;
			padding: $base-interval 0px;
			flex-wrap: nowrap;
			&:last-child {
				border-bottom: 0;
			}
			.select {
				flex-shrink: 0;
				padding: 0px $base-interval;
				margin-left: -1*$base-interval;
				height:88rpx;
				@extend .flex-space-between-center;
				image {
					width: 32rpx;
				}
			}
			.avatar {
				flex-shrink: 0;
				width: 88rpx;
				border-radius: $border-radius-circle;
				margin-right: $base-interval;
			}
			.info {
				width: 100%;
				flex-shrink: 1;
				.name{
					@extend .flex-space-between-center;
					justify-content: flex-start;
					image{
						width: 76rpx;
						margin-left: $sm-interval;
					}
				}
				
				.course{
					color: $text-color-nine;
					margin-top:5rpx;
					text{
						font-size: $font-size-sm;
						padding: 0px 15rpx;
					}
				}
			}
			.btn {
				flex-shrink: 0;
				width: 92rpx;
				line-height: 48rpx;
				background: $main-color;
				border-radius: 4rpx;
				font-size: $font-size-sm;
				text-align: center;
				color: $text-color-white;
			}
			.active {
				background: #b0b2bf;
			}
		}
	}
}
.global-btn {
	width: 100%;
	line-height: 100rpx;
	left: 0px;
	bottom: 100rpx;
	position: fixed;
	@extend .flex-space-between-center;
	@extend .box-shadow;
	z-index: 3;
	background-color: $bg-color-white;
	.item {
		@extend .flex-space-between-center;
		justify-content: center;
		width: 50%;
		color: $text-color-nine;
		&:last-child{
			background: $main-color;font-weight: 500;
			color: $text-color-white;
		}
		image {
			width: 32rpx;
			margin-right: -10+$sm-interval;
		}
	}
}
</style>
